<!--
 * @Author: MarsLay
 * @Date: 2021-12-27 10:54:10
 * @LastEditTime: 2022-07-28 11:49:55
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义头像组件，动态传值显示头像，可通过slot动态插入样式
 * @FilePath: components\avatar\avatar.vue
-->
<template>
  <view class="avatar" :style="{ width: size + 'px', height: size + 'px' }" :class="[shape]">
    <block v-if="username">
      <view class="head-img" :class="username">{{ username }}</view>
    </block>
    <block v-else>
      <image v-if="src" class="head-img" :mode="fit" :src="dsrc" @error="error"></image>
      <image v-else class="head-img" :mode="fit" :src="customUrl"></image>
    </block>
  </view>
</template>

<script>
export default {
  name: "avatar",
  components: {},
  props: {
    shape: {
      type: String,
      default: "circle",
    },
    size: {
      type: Number,
      default: 50,
    },
    src: {
      type: [Number, String],
    },
    fit: {
      type: String,
      default: "aspectFill",
    },
    username: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dsrc: this.src,
    };
  },
  computed: {
    customUrl() {
      return this.shape == "square"
        ? "../../static/img/common/el-head-f.png"
        : "../../static/img/common/el-head-y.png";
    },
  },
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    error(e) {
      this.dsrc =
        "../../static/img/common/el-pot.png";
    },
  },
};
</script>
<style lang='less' scoped>
.avatar {
  position: relative;
  overflow: hidden;
}

.circle {
  border-radius: 50%;
}

.head-img.user {
  .flex(row, center);
  width: 100%;
  height: 100%;
  background-color: #c0c4cc;
  color: #ffffff;
}
.round {
  border-radius: 10upx;
}
</style>